<template>
  <div  class="container">
    <!-- 顶部 -->
    <header class="navbar-fixed-top nav-color">
    <el-button icon="el-icon-arrow-left" size="mini" class="btn" @click="goback" v-show="flag">返回</el-button>菲利格商场
    </header>
  

    <!-- 内容部分 -->
   
   <transition>
     <router-view></router-view>
   </transition>

    <!-- 底部 -->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/member">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/cart">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"
          ><span class="mui-badge" id="badge">{{ $store.getters.getAllCount }}</span></span
        >
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/search">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
    export default{

      data(){

        return {

          flag : false

        }

      },

      created(){

        this.flag = this.$route.path === "/home" ? false : true

      },

      methods:{

        goback(){

          this.$router.go(-1)

        }

      },

      watch: {

        "$route.path" : function(newVal){

          if(newVal === "/home"){

            this.flag = false

          }else{

            this.flag = true

          }

        }

      }
    }
</script>

<style lang="scss" scoped>
.container {
  margin: 0;
  padding: 0;
}

.nav-color {
  font-size: 15px;
  color: snow;
  line-height: 40px;
  width: 100%;
  height: 40px;
  background-color: lightcoral;
  text-align: center;
  letter-spacing: 2px;
}
.container {
  margin-top: 40px;
  overflow-x: hidden;
  margin-bottom: 40px;
}
a {
  text-decoration: none !important;
}

//=========组件切换动画=========
.v-enter{
  opacity: 0;
  transform: translateX(100%);
}

.v-leave-to{
   opacity: 0;
  transform: translateX(-100%);
  position: absolute; 
}

.v-enter-active,
.v-leave-active{
  transition: all 0.5s ease;
}
//=========组件切换动画  end=========


header{

    .btn{

      position: absolute;
      left: 0;
      border-radius: 0;
      background-color: lightcoral;
      height: 100%;
      color: white;
    }

}
</style>